<template>
    <div>
        <template v-if="userinfo">
            <div class="user-info">
                <div class="user-picture">
                    <div class="pic" v-if="userinfo.avatar_url">
                        <img :src="userinfo.avatar_url" :alt="userinfo.avatar_description" class="ele" />
                    </div>
                    <el-icon v-else size="50" color="#fff"><User /></el-icon>
                </div>
                <div class="fullname">{{ userinfo.last_name }} {{ userinfo.first_name }}</div>
                <el-button color="#435764" @click="jumpPage()">
                    <el-icon size="16"><Comment /></el-icon>
                    {{ $t('user.profile.message') }}
                </el-button>
                <!-- <el-button color="#435764" v-if="userStore.userinfoL?.id !== userinfo.id">
                    <el-icon size="16"><Remove /></el-icon>
                    {{ $t('user.index.remove_contact') }}
                </el-button> -->
            </div>
            <div class="profile-tree">
                <div class="node-category">
                    <h3 class="lead">{{ $t('user.profile.detail_title') }}</h3>
                    <ul>
                        <!-- <li class="content-node">
                            <dl>
                                <dt>{{ $t('user.profile.email') }}</dt>
                                <dd>{{ userinfo.email }}</dd>
                            </dl>
                        </li> -->
                        <li class="content-node">
                            <dl>
                                <dt>{{ $t('user.profile.code') }}</dt>
                                <dd>{{ userinfo.code }}</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="node-category">
                    <h3 class="lead">{{ $t('user.profile.course_title') }}</h3>
                    <ul>
                        <li class="content-node">
                            <dl>
                                <dt>{{ $t('user.profile.course_intro') }}</dt>
                                <dd v-for="course in userinfo.courses" :key="course.id">
                                    <router-link :to="`/console/course/${course.id}`">{{ course.name }}</router-link>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                    <ul>
                        <li class="content-node">
                            <dl>
                                <dt>{{ $t('course.member.index.table_label_4') }}</dt>
                                <dd>
                                    {{userinfo.role_name}}
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <!-- <div class="node-category">
                    <h3 class="lead">其它</h3>
                    <ul>
                        <li>
                            <RouterLink to="/console/">討論區文章</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/console/">討論區議題</RouterLink>
                        </li>
                    </ul>
                </div> -->
                <div class="node-category">
                    <h3 class="lead">{{ $t('user.profile.login_title') }}</h3>
                    <ul>
                        <li class="content-node">
                            <dl>
                                <dt>{{ $t('user.profile.first_login') }}</dt>
                                <dd>{{ moment(userinfo.created_at).locale(locale).format('YYYY年 MM月 DD日(ddd) HH:mm') }} ({{ calculatedDuration(userinfo.created_at) }})</dd>
                            </dl>
                        </li>
                    </ul>
                </div>
            </div>
        </template>
        <el-empty v-else :description="$t('user.profile.empty_desc')" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import { useUserStore } from '@/stores/user'

import type { UserInfo } from '@/types/user.ts'
import UserService from '@/api/user'

import moment from 'moment'

const route = useRoute()
const userId = computed(() => Number(route.params.userId))
const loading = ref(false)
const userStore = useUserStore()
const { locale } = useI18n<{ message: MessageSchema }, SupportedLocales>()

const userinfo = ref<UserInfo | null>()
function getUserInfo() {
    loading.value = true
    UserService.getById(userId.value)
        .then(res => {
            userinfo.value = res
        })
        .finally(() => {
            loading.value = false
        })
}
function calculatedDuration(date: string | Date) {
    const createdAt = moment(date)
    const now = moment()
    const duration = moment.duration(now.diff(createdAt))

    const durationText = `(${Math.floor(duration.asDays())} 日 ${duration.hours()} 小時)`

    return durationText
}
const router = useRouter()
const jumpPage = () => {
    router.push({ name: 'message', query: { userId: userinfo.value.id}})
}
watch(
    () => route.fullPath,
    () => {
        getUserInfo()
    },
)

onMounted(() => {
    getUserInfo()
})
</script>

<style lang="less" scoped>
.user-info {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;

    .user-picture {
        border-radius: 50%;
        width: 84px;
        height: 84px;
        background-color: #e6e6e6;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;

        .pic {
            max-width: 100%;
            max-height: 100%;
            width: 100%;
        }
    }

    .fullname {
        font-weight: 400;
        color: #000;
        font-size: 26px;
        line-height: 1.2;
    }

    :deep(.el-button) {
        & > span {
            gap: 4px;
        }
    }
}

.profile-tree {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .node-category {
        margin-bottom: 15px;
        border-radius: 2px;
        padding: 15px;
        border: 1px solid #e3e3e3;
        background-color: #fcfcfc;
        width: calc(50% - 10px);

        .lead {
            margin-bottom: 18px;
            border-radius: 2px;
            border-left: 2px solid #f06423;
            padding: 4px 15px;
            font-size: 18px;
            font-weight: 400;
            background-color: rgba(0, 0, 0, 0.05);
            background-image: url(@/assets/img/strip2_black8.svg);
        }

        ul {
            li {
                margin-bottom: 5px;
                color: #4c4c4c;
                font-size: 15px;
                line-height: 1.666;

                a {
                    color: #4c4c4c;
                    transition: color 0.35s ease-in-out;

                    &:hover {
                        color: #f06423;
                    }
                }

                &.content-node {
                    dl {
                        margin-bottom: 15px;

                        dt {
                            color: #000;
                        }
                    }
                }
            }
        }
    }
}
</style>
